<template>
    <div v-dialogDrag>
        <el-dialog
                :title="loadingTitle"
                v-model="dialogVisible"
                width="560px"
                center
                :destroy-on-close="true"
                :close-on-click-modal="false"
                :before-close="handleClose">
            <el-form :inline="false" :model="formData" ref="rulesForm" label-position="right" label-width="130px">
                <el-form-item label="用户头像：">
                    <img :src="formData.avatar ? formData.avatar : defaultImg" style="width: 60px;height:60px" :onerror="defaultImg">

    <!--                <el-upload-->
    <!--                        class="avatar-uploader"-->
    <!--                        action=""-->
    <!--                        :show-file-list="false"-->
    <!--                        :http-request="imgUploadRequest"-->
    <!--                        :on-success="imgUploadSuccess"-->
    <!--                        :before-upload="imgBeforeUpload">-->
    <!--                    <img v-if="formData.img" :src="formData.img" class="avatar">-->
    <!--                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
    <!--                </el-upload>-->
                </el-form-item>
                <el-form-item label="用户名：" prop="username">
                    {{formData.username}}
                </el-form-item>
                <el-form-item label="用户昵称：" prop="nickname">
                    {{formData.nickname}}
                </el-form-item>
                <el-form-item label="姓名：" prop="real_name">
                    {{formData.real_name}}
                </el-form-item>
                <el-form-item label="手机号：" prop="phone">
                    {{formData.phone}}
                </el-form-item>
                <el-form-item label="审核状态：" prop="status_text">
                    {{formData.status_text}}
                </el-form-item>
                <el-form-item label="创建时间：">
                    {{formData.created_at}}
                </el-form-item>
                <el-form-item label="更新时间：">
                    {{formData.updated_at}}
                </el-form-item>
                <el-form-item label="住房情况：">
                    {{formData.housing}}
                </el-form-item>
                <el-form-item label="购车情况：">
                    {{formData.car}}
                </el-form-item>
                <el-form-item label="婚姻状况：">
                    {{formData.marital_status}}
                </el-form-item>
                <el-form-item label="择偶年龄：">
                    {{formData.mate_age_range}}
                </el-form-item>
                <el-form-item label="择偶城市：">
                    {{formData.mate_cities}}
                </el-form-item>
                <el-form-item label="状态：" prop="is_active">
                    <el-switch
                            v-model="formData.is_active"
                            active-color="#13ce66"
                            inactive-color="#ff4949" disabled>
                    </el-switch>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="handleClose" :loading="loadingSave">取消</el-button>
    <!--            <el-button type="primary" @click="submitData" :loading="loadingSave">确定</el-button>-->
            </template>
        </el-dialog>
    </div>
</template>

<script>
    import {UsersUsersDetail} from "@/api/api";
    import avatarimg from "@/assets/img/avatar.jpg";
    export default {
        name: "userDetail",
        emits: ['refreshData'],
        data() {
            return {
                dialogVisible:false,
                loadingSave:false,
                loadingTitle:'',
                defaultImg:avatarimg,
                formData:{
                    nickname:'',
                    real_name:'',
                    phone:'',
                    created_at:'',
                    updated_at:'',
                    status_text:'',
                    avatar:'',
                    housing:'',
                    car:'',
                    marital_status:'',
                    mate_age_range:'',
                    mate_cities:''
                },
            }
        },
        methods:{
            handleClose() {
                this.dialogVisible=false
                this.$emit('refreshData')
            },
            addUserFn(item,flag) {
                this.loadingTitle=flag
                this.dialogVisible=true
                if(item && item.id){
                    UsersUsersDetail(item.id).then(res=>{
                        if(res.code===200){
                            const d=res.data
                            this.formData={
                                nickname:d.nickname,
                                real_name:d.real_name,
                                phone:d.phone,
                                created_at:d.created_at,
                                updated_at:d.updated_at,
                                status_text:d.status_text,
                                avatar:d.avatar,
                                housing:d.profile?d.profile.housing:'',
                                car:d.profile?d.profile.car:'',
                                marital_status:d.mate_criteria?d.mate_criteria.marital_status:'',
                                mate_age_range:d.mate_criteria?`${d.mate_criteria.min_age}-${d.mate_criteria.max_age}`:'',
                                mate_cities:d.mate_criteria?d.mate_criteria.cities:''
                            }
                        }
                    })
                }
            },
            imgBeforeUpload(file) {
                const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
                if (!isJPG) {
                    this.$message.error('图片只能是 JPG/PNG 格式!');
                    return false
                }
                return isJPG;
            },
            async imgUploadRequest(option) {
                // OSS.ossUploadProductImg(option);
            },
            imgUploadSuccess(res) {
                if (res) {
                    this.formData.img = res.url
                }
            },
        }
    }
</script>

